<template>
    <view class="search">
        <view class="search-input">
              <image :src="require('./_static/images/search_icon.png')" class="icon" />
              <input type="text" 
              :value="searchvalue"
               placeholder="朱颜荟-越美丽越优惠"
               bindconfirm=”search“
               @input="getSearchValue"/> <view class="btn" @tap="search">搜索</view>
        </view>
        <view class="con">
                <Default :hl="searchHistoryList" v-if="list.length == 0"  @setSelectItem="getSelectItem" @clearSearchHistroyList="clear" />
                <view class="search-list" wx:else>
                        
                             <MyShopCard v-for="(item,index) in list" :key="index" :d="item" />
                    
                      
                </view>
                   <PageBottom :LoadingType="loadingType" />
        </view>

    </view>
</template>
<script>

import Default from './_components/default'
import MyShopCard from '@components/myShopCard/index'
import {postQueryBeautySalon} from '@/request/actions'
import PageBottom from '@components/pageBottom/index'

export default {
    data(){
        return {
            searchvalue:'',
            searchHistoryList:[],
            list:[],
            loadingType:'none'
        }
       
    },
    components:{
        Default,
        MyShopCard,
        PageBottom
    },
    methods:{
        getSearchValue(e){

            let v = e.detail.value.replace(/(^\s+)|(\s+)$/g,'');
            this.searchvalue = v;
        },
        search(){

             
             this.HttpQueryBeautySalon(this.searchvalue);
     
        },
           HttpQueryBeautySalon(searchContent){
                uni.showLoading();
                this.list = [];
            

                postQueryBeautySalon({searchContent}).then(r=>{
                        let {data:res} = r;
                        if(res.status == 200){
                        
                            this.list = res.data.list.stulist;
                        }


                        if(this.list.length && this.searchHistoryList.indexOf(searchContent) <0 && searchContent ){
                                this.searchHistoryList = this.getStroage(); 
                                this.searchHistoryList.push(searchContent);
                                let value = JSON.stringify(this.searchHistoryList);
                                uni.setStorageSync('searchHistoryList', value)
                        }
                        

                        this.loadingType = this.list.length == 0?0:1
            
                        uni.hideLoading(); 
                       
                })
         },
          getStroage(){
                let d = [];
                try{
                        d = JSON.parse(uni.getStorageSync('searchHistoryList')) 
                    }catch(err){

                    }

                    return d

            },
            getSelectItem(str){
                this.searchvalue = str;  
                this.HttpQueryBeautySalon(str);
            },
             clear(){
                uni.removeStorageSync('searchHistoryList');
                this.searchHistoryList = [];
                this.onLoad();
            }
    },
 

   

   

    onLoad(query){
           let {categoryName} = query;

           if(categoryName){
                this.searchvalue = categoryName;
                this.HttpQueryBeautySalon(this.searchvalue);

           }

            this.searchHistoryList = this.getStroage();  
          

    }


}
</script>
<style lang="scss">
  @import './_static/scss/index.scss';
</style>